<template>
  <div class="goods">
    <div>
      <div class="top">
        <el-text>{{ datas.lookTitle ? datas.title : "" }}</el-text>
        <el-text v-if="datas.lookMore">查看更多>></el-text>
      </div>
      <div class="items">
        <el-row :gutter="10">
          <el-col :span="datas.column === 1 ? 24 : datas.column === 2 ? 12 : 8" v-for="(item, index) in datas.list" :key="index">
            <div v-if="datas.column === 1" class="column1">
              <img class="img" :src="item.image" />
              <div class="tbx">
                <el-text class="w100" line-clamp="2">{{ item.name }}</el-text>
                <el-text class="price w100">￥{{ item.price }}</el-text>
              </div>
            </div>
            <div v-else class="column2">
              <img class="img" :class="datas.column === 2 ? 'height157' : 'height115'" :src="item.image" />
              <div class="tbx">
                <el-text class="w100" line-clamp="2">{{ item.name }}</el-text>
                <el-text class="price w100">￥{{ item.price }}</el-text>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script lang="ts" setup name="Goods">
import { toRefs } from "vue";
const props = defineProps({
  datas: {
    type: Object
  }
});
const { datas } = toRefs(props);
</script>
<style lang="scss" scoped>
.goods {
  background-color: #ffffff;
  .top {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  .items {
    padding: 0 10px;
    .column1 {
      display: flex;
      margin-bottom: 10px;
      .img {
        display: block;
        width: 98px;
        height: 98px;
      }
      .tbx {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        .price {
          color: #ff0000;
        }
      }
    }
    .column2 {
      margin-bottom: 10px;
      .img {
        display: block;
        width: 100%;
      }
      .tbx {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        .price {
          margin-top: 10px;
          color: #ff0000;
        }
      }
    }
  }
}
</style>
